<template>
  <div>
    <!-- 消息滚动通知栏 -->
    <el-carousel height="30px" direction="vertical" autoplay :interval="2000">
      <el-carousel-item v-for="msg in this.$store.state.message" :key="msg.timeStamp">
        <h3 class="medium">{{ msg.timeStamp }} {{msg.info}}</h3>
      </el-carousel-item>
    </el-carousel>
    <!-- 总览栏 -->
    <el-row :gutter="12">
  <el-col :span="8">
    <el-card>
      <h2>88</h2>
      <p>门店总数量</p>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card>
      <h2>12</h2>
      <p>目前在售啤酒款数</p>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card>
      <h2>112</h2>
      <p>今日啤酒总销量</p>
    </el-card>
  </el-col>
</el-row>
    <!--  ECharts 报表区域 -->
      <div id="main" style="width: 800px;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'Dashboard',
  data () {
    return {
    }
  },
  created () {},
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '啤酒销售'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['原浆', 'HB黑啤', '德式白啤', '哈密瓜小麦', '草莓小麦']
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '原浆',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'HB黑啤',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '德式白啤',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '哈密瓜小麦',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '草莓小麦',
          type: 'line',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          areaStyle: {},
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
}
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #F56C6C;
}
.el-card {
  background-color:#00C2EE;
  margin-bottom: 20px;
}
</style>
